<template>
  <div>
    <el-dialog title="添加/编辑便签" :visible.sync="dialogVisible" :before-close="changedialogVisible">
      <el-row :gutter="45">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="selecttitle">关联项目</span>
            <el-select v-model="form.projectId" @change="changeProject" filterable clearable>
              <el-option
                v-for="dict in projectList"
                :key="dict.guid"
                :label="dict.name"
                :value="dict.guid"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="selecttitle">关联业务</span>
            <el-select v-model="form.businessId" :disabled="!isProjectId" filterable clearable>
              <el-option
                v-for="dict in businessList"
                :key="dict.guid"
                :label="dict.name"
                :value="dict.guid"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <span class="selecttitle">关联干系人</span>
            <el-select v-model="stakeholderId" :multiple="true" :disabled="!isProjectId" filterable clearable>
              <el-option
                v-for="dict in stakeholderList"
                :key="dict.guid"
                :label="dict.name"
                :value="dict.guid"
              />
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-tag>
          <i class="el-icon-warning" /> 请先选择项目关联后，再选择关联业务和关联干系人
        </el-tag>
      </el-row>
      <el-row>
        <div class="notetextarea">
          <span class="selecttitle">
            <span class="mustinput">*</span>便签内容
          </span>
          <el-input v-model="form.content" type="textarea" :rows="6" placeholder="请输入内容" />
        </div>
      </el-row>
      <el-row>
        <vue-uploader
          v-if="dialogVisible"
          :single-type="false"
          :file-list="form.attachmentList"
          @changeFileData="changeFile"
          @removeFileList="removeFileList"
          :pathName="'TJECdocuments/便签'"
        />
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelNote ">取 消</el-button>
        <el-button type="primary" @click="sumbitNote ">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getProjectList,
  getBusinessList,
  getStakeholderList,
  updateNote,
  infoNote,
  addNote
} from '@/api/note';
import vueUploader from '@/components/Uploader';
export default {
  name: 'EditNote',
  components: { vueUploader },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    noteId: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      isProjectId: false,
      projectList: [],
      businessList: [],
      stakeholderList: [],
      stakeholderId: [],
      form: {
        projectId: null,
        attachmentGuids: [],
        businessId: null,
        stakeholderId: null,
        content: '',
        attachmentList: []
      }
    }
  },
  watch: {
    noteId (val, oldVal) {
      if (val !== null) {
        this.getInfo()
      }
      if (val !== oldVal) {
        this.form = {
          projectId: null,
          businessId: null,
          stakeholderId: null,
          content: '',
          attachmentGuids: [],
          attachmentList: []
        }
        this.stakeholderId = []
      }
    },
    'form.projectId' (val, oldVal) {
      if (val !== null) {
        this.isProjectId = true
        getBusinessList({ projectGuid: this.form.projectId }).then(res => {
          this.businessList = res.data
        })
        getStakeholderList({ projectGuid: this.form.projectId }).then(res => {
          this.stakeholderList = res.data
        })
      } else {
        this.isProjectId = false
      }
      // if (val !== oldVal) {

      // }
    }
  },
  mounted () {
    getProjectList({
      userGuid: JSON.parse(sessionStorage.getItem('userinfo') || {}).userId
    }).then(res => {
      this.projectList = res.data
    })
    if (this.noteId !== null) {
      this.getInfo()
    }
  },
  methods: {
    getInfo () {
      infoNote(this.noteId).then(res => {
        if (res.code === 200) {
          this.form = res.data
          this.form.projectId = res.data.projectId
          res.data.stakeholderList.map((item, index) => {
            this.stakeholderId[index] = item.stakeholderId
            this.$set(this.stakeholderId, index, item.stakeholderId)
          })
          this.form.businessId = res.data.businessId
          this.form.content = res.data.content
          if (res.data.attachmentGuids === null) {
            this.form.attachmentGuids = []
          }
        }
      })
    },
    cancelNote () {
      this.$emit('changedialogVisible', false)
    },
    sumbitNote () {
      if (this.form.content.trim() === '') {
        this.msgError('便签内容不能为空！')
        return false
      }
      this.form.stakeholderId =
        this.stakeholderId === undefined
          ? undefined
          : this.stakeholderId.join(',')
      if (this.isEdit) {
        updateNote(this.form).then(res => {
          this.msgSuccess(res.msg)
          this.$emit('changedialogVisible', false)
        })
      } else {
        addNote(this.form).then(res => {
          if (res.code === 200) {
            this.msgSuccess(res.msg)
            this.$emit('changedialogVisible', false)
          }
        })
      }
    },
    changedialogVisible () {
      this.$emit('changedialogVisible', false)
    },
    changeFile (id, name) {
      if (this.form.attachmentGuids === null) {
        this.form.attachmentGuids = []
      }
      this.form.attachmentGuids.push(id)
      // if (this.form.attachmentList === null) {
      //   this.form.attachmentList = []
      // }
      // this.form.attachmentList.push({ fileName: name, guid: id })
    },
    removeFileList (id) {
      this.form.attachmentGuids = this.form.attachmentGuids.filter(
        item => item != id
      )
      this.form.attachmentList = this.form.attachmentList.filter(
        item => item.guid != id
      )
    },
    changeProject () {
      this.form.businessId = null
      this.form.stakeholderId = null
      this.stakeholderId = []
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-dialog {
  width: 1200px;
  .el-dialog__header {
    height: 56px;
    background-image: linear-gradient(180deg, #bed6fa 0%, #e5edf3 100%);
    box-shadow: 0 1px 0 0 #e8e8e8;
    padding: 16px 24px;
    .el-dialog__title {
      font-family: Microsoft YaHei;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
      letter-spacing: 0;
      line-height: 24px;
    }
  }
  .el-dialog__body {
    padding: 20px 40px;
    .el-row {
      margin-bottom: 24px;
      .el-tag--medium {
        width: 100%;
        height: 40px;
        line-height: 40px;
      }
      .notetextarea {
        display: flex;
        .selecttitle {
          text-align: right;
          width: 75px;
          margin-right: 10px;
          margin-top: 10px;
        }
      }
      .grid-content.bg-purple {
        display: flex;
        align-items: center;
        .selecttitle {
          width: 70px;
          margin-right: 10px;
          text-align: right;
        }
        .el-select {
          flex: 1;
        }
      }
    }
  }
}
.uploadicon {
  margin-right: 5px;
}
</style>
